﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucListNews.ascx.cs"
    Inherits="RealState.W.uc.ucListNews" %>
<style>
.pag
{
	padding-left: 10px;
padding-right: 10px;
font-weight: bold;
	}
	.panel_item
	{
		display: inline;
		}
	.panel_item li {
display: inline-block;
background: none;
position: relative;
margin-left: 0;
margin-right: 10px;
}
.page_link {
font: 11px/1.6 "Helvetica Neue",Arial,"Liberation Sans",FreeSans,sans-serif;
display: inline-block;
padding: 0;
font-weight: 400;
line-height: 28px;
text-decoration: none;
color: #333;
border: 1px solid #ccc;
position: relative;
padding: 0 12px;
margin: 5px;
background: #fff;
background: -moz-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(50%,#f1f1f1),color-stop(51%,#e1e1e1),color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -o-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -ms-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
-webkit-box-shadow: 0px 1px 1px 0px #b9b9b9;
-moz-box-shadow: 0px 1px 1px 0px #b9b9b9;
box-shadow: 0px 1px 1px 0px #b9b9b9;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
zoom: 1;
}

.active_page
{
	background: darksalmon !important;
background: -moz-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(50%,#f1f1f1),color-stop(51%,#e1e1e1),color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -o-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -ms-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
	}
</style>
<script type="text/javascript">
    $(document).ready(function() {

        var show_per_page = 5;
        var number_of_items = $('#contentlog').children().size();
        var number_of_pages = Math.ceil(number_of_items / show_per_page);

        $('#current_page').val(0);
        $('#show_per_page').val(show_per_page);
                                
        var navigation_html = '<span class="small-button-b" style="margin-right:10px;"><a style="color:#fff;" href="javascript:previous();">Trang trước</a></span>';
        var current_link = 0;
        while (number_of_pages > current_link) {
            navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';
            current_link++;
        }
        navigation_html += '<span class="small-button-b" style="margin-left:10px;"><a style="color:#fff;" href="javascript:next();">Trang sau</a></span>';

        $('#page_navigation').html(navigation_html);

        $('#page_navigation .page_link:first').addClass('active_page');

        $('#contentlog').children().css('display', 'none');

        $('#contentlog').children().slice(0, show_per_page).css('display', 'block');

    });

    function previous() {

        new_page = parseInt($('#current_page').val()) - 1;
        if ($('.active_page').prev('.page_link').length == true) {
            go_to_page(new_page);
        }

    }

    function next() {
        new_page = parseInt($('#current_page').val()) + 1;
        if ($('.active_page').next('.page_link').length == true) {
            go_to_page(new_page);
        }

    }
    function go_to_page(page_num) {

        var show_per_page = parseInt($('#show_per_page').val());

        start_from = page_num * show_per_page;

        end_on = start_from + show_per_page;

        $('#contentlog').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');


        $('.page_link[longdesc=' + page_num + ']').addClass('active_page').siblings('.active_page').removeClass('active_page');

        $('#current_page').val(page_num);
    }
  
</script>

<div class="breadcrumb clearfix">
    <span>You are here:&nbsp;&nbsp;</span><a href="index.html">Home</a><span>&nbsp;&nbsp;/&nbsp;&nbsp;</span><a
        href="categories.html" class="current-page">Life Style</a>
</div>
<!--end:breadcrumb-->
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
			<div id="contentlog">
<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <section class="shadow-box clearfix">
						<div class="inner-box">
							<div class="post-item clearfix">
								<a href="~/NewsPage.aspx?ID=<%# Eval("ID") %>"><img src="<%# Eval("IMGPATH") %>" class="responsive-img hover-effect border-box" alt="" /></a>
								<div class="entry-content clearfix">
									<h3 class="entry-title"><a href="~/NewsPage.aspx?ID=<%# Eval("ID") %>"><%# Eval("TITLE") %></a></h3>
									 <span class="entry-meta"><%# Eval("CREATEDTIME") %></span>
									<p><%# Eval("CONTENT") %></p>
									<a href="~/NewsPage.aspx?ID=<%# Eval("ID") %>" class="more-link">Đọc thêm...</a>
								</div><!--end:entry-content-->
							</div><!--end:post-item-->
						</div><!--inner-box-->
                    </section>
        <!--end:shadow-box-->
    </ItemTemplate>
</asp:Repeater>
</div>
<div class="pagination clearfix" style="margin-left: 10px;">
<div class="page-pagination" id="page_navigation"></div>
</div>

<!--end:pagination-->

